<!doctype html>
<html class="theme-next use-motion ">
<head>
  

<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />








  <link rel="stylesheet" type="text/css" href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5"/>



  <link href='//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>


<link rel="stylesheet" type="text/css" href="/css/main.css?v=0.4.5.1"/>




  <meta name="keywords" content="PHP,程序员,React,js" />



  <link rel="alternate" href="/atom.xml" title="Robbinhan's Blog" type="application/atom+xml" />



  <link rel="shorticon icon" type="image/x-icon" href="/favicon.ico?v=0.4.5.1" />


<meta property="og:type" content="website">
<meta property="og:title" content="Robbinhan's Blog">
<meta property="og:url" content="http://robbinhan.github.io/index.html">
<meta property="og:site_name" content="Robbinhan's Blog">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Robbinhan's Blog">


<script type="text/javascript" id="hexo.configuration">
  var CONFIG = {
    scheme: '',
    sidebar: 'post'
  };
</script>

  <title> Robbinhan's Blog </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="">

  <!--[if lte IE 8]>
  <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;margin:0 auto;'>
    <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
      <img src="http://7u2nvr.com1.z0.glb.clouddn.com/picouterie.jpg" border="0" height="42" width="820"
           alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today or use other browser ,like chrome firefox safari."
           style='margin-left:auto;margin-right:auto;display: block;'/>
    </a>
  </div>
<![endif]-->
  

  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?fb7093a406ece5b08b67a5501b5c6190";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>



  <div class="container one-column 
   page-home 
">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><h1 class="site-meta">
  <span class="logo-line-before"><i></i></span>
  <a href="/" class="brand" rel="start">
      <span class="logo">
        <i class="icon-next-logo"></i>
      </span>
      <span class="site-title">Robbinhan's Blog</span>
  </a>
  <span class="logo-line-after"><i></i></span>
</h1>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu ">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            <i class="menu-item-icon icon-next-home"></i> <br />
            Startseite
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            <i class="menu-item-icon icon-next-archives"></i> <br />
            Archiv
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            <i class="menu-item-icon icon-next-tags"></i> <br />
            Tags
          </a>
        </li>
      

      
      
    </ul>
  

  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div id="content" class="content"> 
  <section id="posts" class="posts-expand">
    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2016/09/03/2016-09-03/" itemprop="url">
                Unbenannt
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2016-09-03T23:13:25+08:00" content="2016-09-03">
            2016-09-03
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2016/09/03/2016-09-03/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2016/09/03/2016-09-03/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><h1 id="JS优化"><a href="#JS优化" class="headerlink" title="JS优化"></a>JS优化</h1><p><a href="https://reaktor.com/blog/javascript-performance-fundamentals-make-bluebird-fast/?utm_source=javascriptweekly&amp;utm_medium=email" target="_blank" rel="external">参考链接</a></p>
<p>##避免重复创建函数对象，分配过多的内存<br>Bad：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">readFileAsJson</span>(<span class="params">fileName, callback</span>) </span>&#123;</div><div class="line">    fs.readFile(fileName, <span class="string">'utf8'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">error, result</span>) </span>&#123;</div><div class="line">        <span class="comment">// This is a new function object created every time readFileAsJson is called</span></div><div class="line">        <span class="comment">// Since it's a closure, an internal Context object is also</span></div><div class="line">        <span class="comment">// allocated for the closure state</span></div><div class="line">        <span class="keyword">if</span> (error) &#123;</div><div class="line">            <span class="keyword">return</span> callback(error);</div><div class="line">        &#125;</div><div class="line">        <span class="comment">// The try-catch block is needed to handle a possible syntax error from invalid JSON</span></div><div class="line">        <span class="keyword">try</span> &#123;</div><div class="line">            <span class="keyword">var</span> json = <span class="built_in">JSON</span>.parse(result);</div><div class="line">            callback(<span class="literal">null</span>, json);</div><div class="line">        &#125; <span class="keyword">catch</span> (e) &#123;</div><div class="line">            callback(e);</div><div class="line">        &#125;</div><div class="line">    &#125;)</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>Good:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">'fs-modified'</span>);</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">internalReadFileCallback</span>(<span class="params">error, result</span>) </span>&#123;</div><div class="line">    <span class="comment">// The modified readFile calls the callback with the context object set to `this`,</span></div><div class="line">    <span class="comment">// which is just the original client's callback function</span></div><div class="line">    <span class="keyword">if</span> (error) &#123;</div><div class="line">        <span class="keyword">return</span> <span class="keyword">this</span>(error);</div><div class="line">    &#125;</div><div class="line">    <span class="comment">// The try-catch block is needed to handle a possible syntax error from invalid JSON</span></div><div class="line">    <span class="keyword">try</span> &#123;</div><div class="line">        <span class="keyword">var</span> json = <span class="built_in">JSON</span>.parse(result);</div><div class="line">        <span class="keyword">this</span>(<span class="literal">null</span>, json);</div><div class="line">    &#125; <span class="keyword">catch</span> (e) &#123;</div><div class="line">        <span class="keyword">this</span>(e);</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">readFileAsJson</span>(<span class="params">fileName, callback</span>) </span>&#123;</div><div class="line">    <span class="comment">// The modified fs.readFile would take the context object as 4th argument.</span></div><div class="line">    <span class="comment">// There is no need to create a separate plain object to contain `callback` so it</span></div><div class="line">    <span class="comment">// can just be made the context object directly.</span></div><div class="line">    fs.readFile(fileName, <span class="string">'utf8'</span>, internalReadFileCallback, callback);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="尽可能最小化对象大小"><a href="#尽可能最小化对象大小" class="headerlink" title="尽可能最小化对象大小"></a>尽可能最小化对象大小</h2><p>Bad:<br>对象用又创建了新的数组<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">EventEmitter</span> </span>&#123;</div><div class="line">    <span class="keyword">constructor</span>() &#123;</div><div class="line">        <span class="keyword">this</span>.listeners = [];</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    addListener(fn) &#123;</div><div class="line">        <span class="keyword">this</span>.listeners.push(fn);</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>Good:<br>参数直接放入当前的属性<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">EventEmitter</span> </span>&#123;</div><div class="line">    <span class="keyword">constructor</span>() &#123;</div><div class="line">        <span class="keyword">this</span>.length = <span class="number">0</span>;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    addListener(fn) &#123;</div><div class="line">        <span class="keyword">var</span> index = <span class="keyword">this</span>.length;</div><div class="line">        <span class="keyword">this</span>.length++;</div><div class="line">        <span class="keyword">this</span>[index] = fn;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2016/04/23/2016-04-23/" itemprop="url">
                Unbenannt
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2016-04-23T23:46:31+08:00" content="2016-04-23">
            2016-04-23
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2016/04/23/2016-04-23/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2016/04/23/2016-04-23/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><h1 id="技术学习的一些看法"><a href="#技术学习的一些看法" class="headerlink" title="技术学习的一些看法"></a>技术学习的一些看法</h1><p>近两年全栈开发的概念越发的火了，很多公司也都开始招聘这方面的人才，一人能做多种活，省成本啊。全栈是非常考研个人学习能力的，要会的东西多，范围广；我也做了这么多年技术，也简单总结下技术学习的看法。</p>
<p>现在的技术圈发展太快，可以说每月都会有新的黑科技出现，对程序员的考验也是非常大；我们在面对这些新的技术时所要做的应该是先学会用，能开发，再考虑是否要深入学习底层知识；有时架构和底层的东西是有共通性的，例如web架构普遍都会采用MVC，httpserver都是基于tcp等，无论用哪种语言开发都离不开这些概念，但是使用的方式又是各不相同，需要我们能快速掌握，举一反三；而全栈技术需要各方面都会。</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2016/04/13/2016-04-13/" itemprop="url">
                Unbenannt
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2016-04-13T15:38:05+08:00" content="2016-04-13">
            2016-04-13
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2016/04/13/2016-04-13/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2016/04/13/2016-04-13/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><h1 id="JS函数Curry化遇到的奇怪问题"><a href="#JS函数Curry化遇到的奇怪问题" class="headerlink" title="JS函数Curry化遇到的奇怪问题"></a>JS函数Curry化遇到的奇怪问题</h1><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> f = <span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>&#123;</div><div class="line">  <span class="keyword">var</span> f1 = <span class="function"><span class="keyword">function</span> (<span class="params">y</span>) </span>&#123;</div><div class="line">    x += y;</div><div class="line">    <span class="keyword">return</span> f1</div><div class="line">  &#125;</div><div class="line">  f1.toString = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> x;</div><div class="line">  &#125;</div><div class="line">  <span class="keyword">return</span> f1;</div><div class="line">&#125;</div><div class="line"><span class="built_in">console</span>.log(f(<span class="number">3</span>)(<span class="number">2</span>)(<span class="number">1</span>))</div></pre></td></tr></table></figure>
<p>同样的代码在node下和chrome下执行的结果是不同的：<br>chrome下输出6，而node却是将整个function打出</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&#123; [<span class="built_in">Function</span>] toString: [<span class="built_in">Function</span>] &#125;</div></pre></td></tr></table></figure>
<p>firefox下和node类似输出</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>/<span class="title">f1</span>(<span class="params"></span>)</span></div></pre></td></tr></table></figure>
<p>可以在console下展开查看内容</p>
<p>而我起初一直以为重写function的toString方法是必须在他的prototype上重写的，但是发现在prototype重写后尽然不是我想要的</p>
<p>chrome下输出<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> (<span class="params">y</span>) </span>&#123;</div><div class="line">    x += y;</div><div class="line">    <span class="keyword">return</span> f1</div><div class="line">  &#125;</div></pre></td></tr></table></figure></p>
<p>node下输出<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">[<span class="built_in">Function</span>]</div></pre></td></tr></table></figure></p>
<p>firefox下和之前类似输出，只是这次toString方法在prototype属性中</p>
<p>Google了下，发现prototype定义的方法是给他的实例或者他子类的实例用的，所以f1不会去调用，修改成这样后才会调用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> f = <span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>&#123;</div><div class="line"> 	<span class="keyword">var</span> f1 = <span class="function"><span class="keyword">function</span> (<span class="params">y</span>) </span>&#123;</div><div class="line">    x += y;</div><div class="line">    <span class="keyword">return</span> f1</div><div class="line">  &#125;</div><div class="line">  f1.prototype.toString = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> <span class="number">123</span>;</div><div class="line">  &#125;</div><div class="line">  <span class="keyword">var</span> f2 = <span class="function"><span class="keyword">function</span> (<span class="params">y</span>) </span>&#123;</div><div class="line">    x += y;</div><div class="line">    <span class="keyword">return</span> f2</div><div class="line">  &#125;</div><div class="line">  f2.__proto__ = f1.prototype</div><div class="line">  f1.call(f2)</div><div class="line">  <span class="keyword">return</span> f2;</div><div class="line">&#125;</div><div class="line"><span class="built_in">console</span>.log(f(<span class="number">3</span>)(<span class="number">2</span>)(<span class="number">1</span>))</div></pre></td></tr></table></figure>
<p>当然此代码在node和firefox下仍然不能正常输出结果，也不知道是为什么!</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2016/03/16/2016-03-16/" itemprop="url">
                PHP的Cookie删除问题
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2016-03-16T13:27:19+08:00" content="2016-03-16">
            2016-03-16
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2016/03/16/2016-03-16/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2016/03/16/2016-03-16/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>正常情况下删除cookie就是调用setcookie方法，并且将过期时间设置为之前的时间；但是如果添加cookie的时候设置了path或者domain参数的话可能就会产生问题。<br>比方：</p>
<pre><code>setcookie(&apos;test&apos;,&apos;a&apos;,time()+3600,&apos;/&apos;);
</code></pre><p>设置test一个小时后过期，路径在’/‘，域名默认是当前的域名，比如是’www.explame.com’，然后当去删除的时候</p>
<pre><code>setcookie(&apos;test&apos;,&apos;a&apos;,time()-24*3600,&apos;/&apos;,&apos;www.explame.com&apos;);
</code></pre><p>如果这样写是无法删除的，因为setcookie时默认会在域名前加“.”号，就变成’.www.explame.com’，所以这样写会去删除’.www.explame.com’域名下的test的cookie，而之前添加的并没有删除，解决方法其实就是添加的时候怎么写，删除的时候也怎么写，就是过期时间修改下。</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/12/25/2015-12-25/" itemprop="url">
                JavaScript函数声明与函数表达式写法的区别
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-12-25T15:27:19+08:00" content="2015-12-25">
            2015-12-25
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/12/25/2015-12-25/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/12/25/2015-12-25/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>表面上的差异是“先与后”，使用函数表达式的方式，调用必须在表达式之后，而函数声明则无关前后问题。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">alert(foo); <span class="comment">// function foo() &#123;&#125;</span></div><div class="line">alert(bar); <span class="comment">// undefined</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;&#125;</div><div class="line"><span class="keyword">var</span> bar = <span class="function"><span class="keyword">function</span> <span class="title">bar_fn</span>(<span class="params"></span>) </span>&#123;&#125;;</div><div class="line">alert(foo); <span class="comment">// function foo() &#123;&#125;</span></div><div class="line">alert(bar); <span class="comment">// function bar_fn() &#123;&#125;</span></div></pre></td></tr></table></figure>
<p>可以看到 foo 的声明是写在 alert 之后，仍然可以被正确调用，因为 JavaScript 解释器会将其提升到 alert 前面，而以函数表达式创建的函数 bar 则不享受此待遇。</p>
<p>那么bar 究竟有没有被提升呢，其实用 var 声明的变量都会被提升，只不过是被先赋值为 undefined 罢了，所以第二个 alert 弹出了 undefined。这具体要涉及到js的<em>变量对象</em>和<em>执行环境</em>概念</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">hereOrThere</span>(<span class="params"></span>) </span>&#123; <span class="comment">//function statement</span></div><div class="line">  <span class="keyword">return</span> <span class="string">'here'</span>;</div><div class="line">&#125;</div><div class="line"></div><div class="line">alert(hereOrThere()); <span class="comment">// alerts 'there'</span></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">hereOrThere</span>(<span class="params"></span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> <span class="string">'there'</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>以上代码hereOrThere函数声明两次，声明首先提升了优先级，并且第二次声明覆盖了第一次声明。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> hereOrThere = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; <span class="comment">// function expression</span></div><div class="line">  <span class="keyword">return</span> <span class="string">'here'</span>;</div><div class="line">&#125;;</div><div class="line"></div><div class="line">alert(hereOrThere()); <span class="comment">// alerts 'here'</span></div><div class="line"></div><div class="line">hereOrThere = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> <span class="string">'there'</span>;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p>以上代码hereOrThere表达式写法两次。</p>
<p>执行顺序是解释器先声明hereOrThere变量，此时值是undefined，然后将返回here的函数赋值，接着alert调用。这里因为是声明的变量，而js中不会对变量提升优先级，所以是顺序执行。</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/12/25/2015-12-26/" itemprop="url">
                Redux架构总结
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-12-25T15:27:19+08:00" content="2015-12-25">
            2015-12-25
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/12/25/2015-12-26/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/12/25/2015-12-26/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>社区内比较受推崇，因为用起来相对比较简单<br><img src="media/2869996312-56737fb328792_articlex.png" alt="2869996312-56737fb328792_articlex"></p>
<p>特性：</p>
<ul>
<li>分层设计，职责清晰。</li>
<li>要求store reducer都是页面单例，易于管理。</li>
<li>action为请求dto对象，是请求类型，请求数据的载体。</li>
<li>reducer是处理请求的方法。不允许有状态，必须是纯方法。必须严格遵守输入输出，中间不允许有异步调用。不允许对state直接进行修改，要想修改必须返回新对象。</li>
<li>store</li>
<li>维持应用的state；</li>
<li>提供 getState() 方法获取 state；</li>
<li>提供 dispatch(action) 方法分发请求来更新 state；门面模式，要求所有的请求满足统一的格式【可以进行路由、监控、日志等】，统一的调用方式。</li>
<li>通过 subscribe(listener) 注册监听器监听state的变化。</li>
<li>官方文档写的较为详细，从设计到开发都有，比flux要好</li>
</ul>
<p>redux的原则:</p>
<ol>
<li><p>state不能被修改。</p>
<ul>
<li>其实这个用react的state也会有同样的问题，最好把state设计的没有冗余，尽量少出这种情况</li>
<li>解决方案：参考官方：因为我们不能直接修改却要更新数组中指定的一项数据，这里需要先把前面和后面都切开。如果经常需要这类的操作，可以选择使用帮助类 React.addons.update，updeep，或者使用原生支持深度更新的库 Immutable。最后，时刻谨记永远不要在克隆 state 前修改它。</li>
</ul>
</li>
<li><p>单一的庞大的reducer的拆分</p>
<ul>
<li>这块设计也不好做，会让人疑惑</li>
<li>官方给的demo中直接按state的内容区分，我觉得这样做不好，如果后期有跨内容的情况，就比较奇怪了。官方给的combineReducers方案，也只是减少代码量，本质没有变化，state还是拆分处理，路由还是业务逻辑自己来做。</li>
<li>解决方案：还是处理一整个state，可以按照约定写reducer类而不是方法，类里按照actionType建方法，架构自动路由并调用。</li>
<li>以前做java架构，路由一定是架构来调用的，目前感觉各大flux框架都是解决问题不彻底。</li>
</ul>
</li>
<li><p>官方建议设计模式：顶层容器组件才对redux有依赖，组件间通过props来传递数据。按照这样设计还是没有解决组件间交互和数据传递的问题。官方react设计建议：react的设计建议：<a href="http://camsong.github.io/redux-in-chinese/docs/basics/UsageWithReact.html" target="_blank" rel="external">http://camsong.github.io/redux-in-chinese/docs/basics/UsageWithReact.html</a></p>
</li>
<li><p>使用connect将state绑定到component。此处有些黑盒了。</p>
</li>
<li><p>异步action用来请求服务端数据,利用middleware增强createStore的dispatch后即支持。</p>
</li>
</ol>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/12/23/2015-12-23/" itemprop="url">
                Node技术进阶脑图
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-12-23T15:27:19+08:00" content="2015-12-23">
            2015-12-23
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/12/23/2015-12-23/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/12/23/2015-12-23/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p><img src="http://i.imgur.com/nvmHDJ4.jpg" alt="Nodejs"></p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/12/23/2015-12-24/" itemprop="url">
                Redis数据清理导致连接超时
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-12-23T15:27:19+08:00" content="2015-12-23">
            2015-12-23
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/12/23/2015-12-24/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/12/23/2015-12-24/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>看到一篇讲解Redis数据清理导致连接超时的问题的文章，之前开发系统时也出现过类似问题，但是一直没有确定具体的原因，当时的情况是crontab下有个每分钟都在执行的php脚本，脚本中是通过redis来做锁的控制，起初一切正常，突然有天脚本“卡住”了，redis中的锁没有删除，导致后续启动的脚本立即被退出；查了日志发现当时出现了连接超时的情况，但是不明白其原因，无奈之下我在程序执行一段后就调用一次ping命令希望能够保持连接，今天的这篇文章也是类似的问题，详细了解到了redis的数据清理机制。</p>
<blockquote>
<p>Redis提供了一套“美好”的过期数据清理机制:</p>
<p>主动过期: Redis对数据是惰性过期，当一个key到了过期时间，Redis也不会马上清理，但如果这个key过期后被再次访问，Redis就会主动将它清理掉。</p>
<p>被动过期: 如果过期的Key一直没被访问，Redis也不会一直把它放那不管，它会每秒10次的执行以下的清理工作：</p>
<p>随机从所有带有过期时间的Key里取出20个<br>如果发现有过期的，就清理<br>如果这里有25%的Key都是过期的，就继续回到第一步再来一次</p>
<p>这套过期机制设计的很赞，可以这样理解：如果当前有超过1/4的Key是过期的话，就不停地清理，直到只剩下1/4不到的Key是要过期的为止，然后就慢慢地随机抽查着清理。</p>
</blockquote>
<p>作者后来的解决方法是在业务逻辑中对需要过期处理的key做了分批删除的操作，自己来处理清理数据的工作，避免长时间处理。</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/12/22/2015-12-22/" itemprop="url">
                加密算法
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-12-22T20:11:19+08:00" content="2015-12-22">
            2015-12-22
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/12/22/2015-12-22/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/12/22/2015-12-22/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>#非对称加密<br>非对称加密具有以下的典型用法：</p>
<ul>
<li>对信息保密，防止中间人攻击：将明文通过接收人的公钥加密，传输给接收人，因为只有接收人拥有对应的私钥，别人不可能拥有或者不可能通过公钥推算出私钥，所以传输过程中无法被中间人截获。只有拥有私钥的接收人才能阅读。此用法通常用于交换对称密钥。</li>
<li>身份验证和防止篡改：权限狗用自己的私钥加密一段授权明文，并将授权明文和加密后的密文，以及公钥一并发送出来，接收方只需要通过公钥将密文解密后与授权明文对比是否一致，就可以判断明文在中途是否被篡改过。此方法用于数字签名。<br>著名的RSA算法就是非对称加密算法，RSA以三个发明人的首字母命名。</li>
</ul>
<p>非对称加密算法如此强大可靠，却有一个弊端，就是加解密比较耗时。</p>
<p>#数字签名</p>
<p>数字签名是非对称加密和摘要算法两者结合。假设，我们有一段授权文本，需要发布，为了防止中途篡改文本内容，保证文本的完整性，以及文本是由指定的权限狗发的。首先，先将文本内容通过摘要算法，得到摘要，再用权限狗的私钥对摘要进行加密得到密文，将源文本、密文、和私钥对应的公钥一并发布即可。那么如何验证呢？</p>
<p>验证方首先查看公钥是否是权限狗的，然后用公钥对密文进行解密得到摘要，将文本用同样的摘要算法得到摘要，两个摘要进行比对，如果相等那么一切正常。这个过程只要有一步出问题就视为无效。</p>
<p>#Base64<br>Base64编码的思想是是采用==64个基本的ASCII码字符对数据进行重新编码==。它将需要编码的数据拆分成字节数组。以3个字节为一组。按顺序排列24 位数据，再把这24位数据分成4组，即每组6位。再在每组的的最高位前补两个0凑足一个字节。这样就把一个3字节为一组的数据重新编码成了4个字节。当所要编码的数据的字节数不是3的整倍数，也就是说在分组时最后一组不够3个字节。这时在最后一组填充1到2个0字节。并在最后编码完成后在结尾添加1到2个 “=”。</p>
<p>例：将对ABC进行BASE64编码：</p>
<ol>
<li><p>首先取ABC对应的ASCII码值。A（65）B（66）C（67）；</p>
</li>
<li><p>再取二进制值A（01000001）B（01000010）C（01000011）；</p>
</li>
<li><p>然后把这三个字节的二进制码接起来（010000010100001001000011）；</p>
</li>
<li><p>再以6位为单位分成4个数据块,并在最高位填充两个0后形成4个字节的编码后的值，（00010000）（00010100）（00001001）（00000011），其中加色部分为真实数据；</p>
</li>
<li><p>再把这四个字节数据转化成10进制数得（16）（20）（9）（3）；</p>
</li>
<li><p>最后根据BASE64给出的64个基本字符表，查出对应的ASCII码字符（Q）（U）（J）（D），这里的值实际就是数据在字符表中的索引。</p>
</li>
</ol>
<p>解码过程就是把4个字节再还原成3个字节再根据不同的数据形式把字节数组重新整理成数据。</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/12/21/2015-12-21/" itemprop="url">
                程序员最应该有的技能是什么？
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-12-21T14:11:19+08:00" content="2015-12-21">
            2015-12-21
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/12/21/2015-12-21/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/12/21/2015-12-21/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>本人根据这几年的工作经验及生活经验总结了几点：</p>
<ol>
<li>学习能力，尤其是快速的学习并掌握的能力，技术日新月异，程序员需要每天都吸取养分，不断接收新的信息，不断学习新的技术；比如当你开发项目时领导交给你个任务，但是你之前从没接触过此类技术，不知道从何入手，于是你google了，查到了些解决方法，但是他是个新的东西，时间又比较紧，你就需要快速学习并简单掌握他。</li>
<li>表达能力，也就是能否与其他同事朋友有效的沟通，注意是有效沟通，就是指用最精简的语言表达出100%的意思，表达能力少若些的也能表达自己的意思，但可能就需要花十几分钟或更久；最基础的是与同是技术人员的表达要清楚，快速；其次是同行业的非技术人员，比如产品，运营等；再就是非同行业的完全不懂的人，比如你的爸妈，爷爷奶奶等。</li>
</ol>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
  </section>

  
  <nav class="pagination">
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/page/18/">18</a><a class="extend next" rel="next" href="/page/2/">&raquo;</a>
  </nav>

 </div>

        

        
      </div>

      
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      <section class="site-overview">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" src="/images/default_avatar.jpg" alt="robbinhan" itemprop="image"/>
          <p class="site-author-name" itemprop="name">robbinhan</p>
        </div>
        <p class="site-description motion-element" itemprop="description"></p>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">175</span>
              <span class="site-state-item-name">Artikel</span>
            </a>
          </div>

          <div class="site-state-item site-state-categories">
            
              <span class="site-state-item-count">8</span>
              <span class="site-state-item-name">Kategorien</span>
              
          </div>

          <div class="site-state-item site-state-tags">
            <a href="/tags">
              <span class="site-state-item-count">3</span>
              <span class="site-state-item-name">Tags</span>
              </a>
          </div>

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/atom.xml" rel="alternate">
              <i class="menu-item-icon icon-next-feed"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        <div class="links-of-author motion-element">
          
        </div>

      </section>

      

    </div>
  </aside>


    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner"> <div class="copyright" >
  
  &copy; &nbsp; 
  <span itemprop="copyrightYear">2016</span>
  <span class="with-love">
    <i class="icon-next-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">robbinhan</span>
</div>

<div class="powered-by">
  Erstellt mit  <a class="theme-link" href="http://hexo.io" rel="external nofollow">Hexo</a>
</div>

<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">
    NexT
  </a>
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?79a704ba5a6d022fa4f136371be54aed";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

 </div>
    </footer>

    <div class="back-to-top"></div>
  </div>

  <script type="text/javascript" src="/vendors/jquery/index.js?v=2.1.3"></script>

  
  
  
    
    

  

    <script type="text/javascript">
      var disqus_shortname = 'robbinhan';
      var disqus_identifier = 'index.html';
      var disqus_title = '';
      var disqus_url = '';

      function run_disqus_script(disqus_script){
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/' + disqus_script;
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      }

      run_disqus_script('count.js');
      
    </script>
  


  
  
  <script type="text/javascript" src="/vendors/fancybox/source/jquery.fancybox.pack.js"></script>
  <script type="text/javascript" src="/js/fancy-box.js?v=0.4.5.1"></script>


  <script type="text/javascript" src="/js/helpers.js?v=0.4.5.1"></script>
  

  <script type="text/javascript" src="/vendors/velocity/velocity.min.js"></script>
  <script type="text/javascript" src="/vendors/velocity/velocity.ui.min.js"></script>

  <script type="text/javascript" src="/js/motion_global.js?v=0.4.5.1" id="motion.global"></script>




  <script type="text/javascript" src="/js/nav-toggle.js?v=0.4.5.1"></script>
  <script type="text/javascript" src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  

  <script type="text/javascript">
    $(document).ready(function () {
      if (CONFIG.sidebar === 'always') {
        displaySidebar();
      }
      if (isMobile()) {
        FastClick.attach(document.body);
      }
    });
  </script>

  

  
  

  
  <script type="text/javascript" src="/js/lazyload.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#posts").find('img').lazyload({
        placeholder: "/images/loading.gif",
        effect: "fadeIn"
      });
    });
  </script>
</body>
</html>
